<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> 通知管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <el-tabs v-model="activeNotice" @tab-click="handleClick">
        <el-tab-pane label="业主通知" name="first">
          <el-table :data="notices" class="table" height="350">
            <el-table-column prop="id" label="ID" align="center"></el-table-column>
            <el-table-column prop="noticeTitle" label="标题" align="center"></el-table-column>
            <el-table-column prop="des" label="内容摘要" align="center"></el-table-column>
            <el-table-column prop="noticeDate" label="发布日期" align="center"></el-table-column>
            <el-table-column prop="workerName" label="发布员工" align="center"></el-table-column>
            <el-table-column prop="areaName" label="发布小区" align="center"></el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template #default="scope">
                <div>
                  <el-button size="mini" @click="handleDetail(scope.$index, scope.row)">查看详情</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <div class="handle-row">
            <el-button type="primary" @click="handleDetail(0, {id:0})">发布新业主通知</el-button>
          </div>
          <!-- 页码 -->
          <div class="pagination">
            <el-pagination background layout="total, prev, pager, next" :current-page="query1.page" :page-size="query1.pageSize" :total="query1.pageTotal" @current-change="handlePageChange"></el-pagination>
          </div>
        </el-tab-pane>


        <el-tab-pane label="员工通知" name="second">
          <el-table :data="workerNotices" class="table" height="350">
            <el-table-column prop="id" label="ID" align="center"></el-table-column>
            <el-table-column prop="noticeTitle" label="标题" align="center"></el-table-column>
            <el-table-column prop="des" label="内容摘要" align="center"></el-table-column>
            <el-table-column prop="noticeDate" label="发布日期" align="center"></el-table-column>
            <el-table-column prop="workerName" label="发布员工" align="center"></el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template #default="scope">
                <div>
                  <el-button size="mini" @click="handleDetail2(scope.$index, scope.row)">查看详情</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <div class="handle-row">
            <el-button type="primary" @click="handleDetail2(0, {id:0})">发布新员工通知</el-button>
          </div>
          <!-- 页码 -->
          <div class="pagination">
            <el-pagination background layout="total, prev, pager, next" :current-page="query2.page"
                           :page-size="query2.pageSize"
                           :total="query2.pageTotal" @current-change="handlePageChange2"></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  export default {
    name: "notice",
    data() {
      return {
        activeNotice: "first",
        notices: [],
        workerNotices: [],
        query1: {
          page: 1,
          pageSize: 5,
          pageTotal: 0
        },
        query2: {
          page: 1,
          pageSize: 5,
          pageTotal: 0
        }
      }
    },
    methods: {
      handleClick(tab) {
        console.log(tab.index);
      },
      getNoticeList() {
        this.$axios.get("notices", {params: this.query1})
          .then(res => {
            console.log(res);
            if (res.data.code == 200) {
              this.notices = res.data.obj.records;
              this.query1.pageTotal = res.data.obj.total;
              this.notices.map(item => {
                item.des = item.noticeBody.slice(0, 8) + "..."
              })
            }
          })
      },
      getWorkerNoticeList() {
        this.$axios.get("workerNotices", {params: this.query2})
          .then(res => {
            console.log(res);
            if (res.data.code == 200) {
              this.workerNotices = res.data.obj.records;
              this.query2.pageTotal = res.data.obj.total;
              this.workerNotices.map(item => {
                item.des = item.noticeBody.slice(0, 8) + "..."
              })
            }
          })
      },
      handleDetail(idx, row) {
        this.$router.push('/notice-edit' + row.id);
      },
      handleDetail2(idx, row) {
        this.$router.push('/notice-worker-edit' + row.id);
      },
      handlePageChange(val){
        this.query1.page = val;
        this.getNoticeList();
      },
      handlePageChange2(val){
        this.query2.page = val;
        this.getWorkerNoticeList();
      }
    },
    created() {
      this.getNoticeList();
      this.getWorkerNoticeList();
    }
  }
</script>

<style scoped>

</style>